// -------------------------------- 1.获取学生数据,并渲染表格-------------------------
async function renderStudent() {
    const { data:res } = await axios.get('/students')
    // console.log(res)
    let arr = res.data.map( item => {
        return `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0? '男':'女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
        </td>
      </tr> 
        `
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent()


// 添加操作，需要提前准备，比如模态框的用法、省市县联动效果
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏

// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
  addModal.show()
})

// 下面的函数 完成省市县的联动效果
async function initCity() {
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')

    // 1. 马上获取全部的省  渲染到第一个下拉框
    const { data:res } = await axios.get('/api/province')
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('')
    
    // 2. 获取市
    province.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        // 省切换后，无论如何，都要重置县
        area.innerHTML = '<option value="">--地区--</option>'
        // 如果没有选择省，则需要重置市
        if (pname === '') return (city.innerHTML = '<option value="">--城市--</option>')
        // 下面，正常获取对应的市，并渲染到第2个下拉框的位置
        // console.log(pname)
        const { data: res2 } = await axios.get('/api/city', { params: { pname } })
        // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
        let arr2 = res2.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + arr2.join('')
      })
      
      // 3 切换市的时候，获取县 
      city.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        let cname = city.value // 获取市的名字
        // 没有选择市，要重置县
        if (cname === '') return (area.innerHTML = '<option value="">--地区--</option>')
        // 下面，正常获取对应的县，并渲染到第3个下拉框的位置
        // console.log(pname)
        const { data: res3 } = await axios.get('/api/area', { params: { pname, cname } })
        // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
        let arr3 = res3.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = '<option value="">--地区--</option>' + arr3.join('')
      })
}
initCity()

// --------------点击弹窗中的确认按钮时 添加数据 ------------
document.querySelector('#submit').addEventListener('click',async function(e) {
    e.preventDefault()
    let data = val(document.querySelector('#form'))
    // 转换为数字类型
    data.age = Number(data.age)
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary  

    // 点击弹出层中的确认的时候，根据弹出层中的标题判断一下，是添加操作还是修改操作
    let title = document.querySelector('.modal-title').innerHTML
    if (title === '添加学员') {
      const { data: res } = await axios.post('/students', data)
      message.success(res.message) // 使用插件提示
      addModal.hide() // 关闭弹出层
      renderStudent() // 更新页面数据
    } else if (title === '修改学员') {
      let id = document.querySelector('.modal-title').dataset.id
      // 发送请求，进行修改
      const { data: res } = await axios.put(`/students/${id}`, data)
      message.success(res.message) // 使用插件提示
      addModal.hide() // 关闭弹出层
      renderStudent() // 更新页面数据
    }

    /* // ajax 提交
    try{
        const {data:res} = await axios.post('/students',data)
        message.success(res.message) // 插件提醒成功
        renderStudent() // 重新获取页面
        addModal.hide() // 关闭弹框
    }catch(e) {
        message.error('添加失败')
    } */

})

// ----------------------- 删除数据 | 修改数据 ------------------
document.querySelector('tbody').addEventListener('click', async function (e) {
    // e.preventDefault()
    // 判断点击是否是删除  classList.contains('bi-trash')是否包含
    if(e.target.classList.contains('bi-trash')) {
        // 获取自定义id值
        let id = e.target.dataset.id
        // console.log('删除id值',id)
        if (!confirm('确定要删除么')) return
        try{
            const { data:res } = await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudent()
        }catch (e) {
            message.error('删除失败')
        }
    }
    // 判断是否是编辑
    if(e.target.classList.contains('bi-pen')) {
        // 说明点击了编辑
        let id = e.target.dataset.id
        // console.log('编辑id值',id)
        document.querySelector('.modal-title').innerHTML = '修改学员'
        document.querySelector('.modal-title').setAttribute('data-id', id)
        // 获取自定义id值
       
        
        addModal.show() // 点击编辑的时候 弹出弹框
        // 数据回填
        const { data: res } = await axios.get(`/students/${id}`)
        // // // 数据回填之前要先把 市/县 获取
        let p1 = axios.get('/api/city',{ params: { pname: res.data.province} })
        let p2 = axios.get('/api/area',{ params: { pname: res.data.province, cname: res.data.city} })
        const [ {data: {data:a} },{ data: {data:c} }] = await Promise.all([p1,p2])
        // console.log(result)
        let arr2 = a.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr2.join('')

        let arr3 = c.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr3.join('')
        // val(表单,数据) 传递两个参数,表示进行数据回填
        val(document.querySelector('#form'),res.data)
 
    }

})


